<template>
    <div class="card loading">
        <div class="image">
        </div>
        <div class="content">
            <h4></h4>
            <div class="desc"></div>
        </div>
    </div>
</template>

<script setup></script>

<style scoped lang="scss">
.card {
    width: 320px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);

    .image {
        height: 200px;

        img {
            display: block;
            width: 100%;
            height: inherit;
            object-fit: cover;
        }
    }

    .content {
        padding: 2rem 1.8rem;

        h4 {
            margin: 0 0 1rem;
            font-size: 1.5rem;
            line-height: 1.5rem;
        }

        .desc {
            font-size: 1rem;
            line-height: 1.4rem;
        }
    }

    &.loading {

        .image,
        h4,
        .desc {
            background: linear-gradient(100deg,
                    rgba(255, 255, 255, 0) 40%,
                    rgba(255, 255, 255, 1) 50%,
                    rgba(255, 255, 255, 0) 60%) #ededed;
            background-size: 200%;
            background-position-x: 120%;
            animation: loading 2s ease-in-out infinite;
        }

        h4,
        .desc {
            min-height: 1.6rem;
            border-radius: 4px;
            animation-delay: 50ms;
        }
    }
}

@keyframes loading {

    0%,
    50% {
        background-position-x: 120%;
    }

    100% {
        background-position-x: -20%;
    }
}
</style>